<template>
	<view class="content">
		<view class="menu-item">
			<view class="tab-item" :class="tabActive==1?'active':''" @click="bindActive(1)">学校简介</view>
			<view class="tab-item" :class="tabActive==2?'active':''" @click="bindActive(2)">2023年毕业生情况</view>
		</view>
		<view class="info-block">
			<view class="introduction" v-if="tabActive==1">
				<view style="padding: 20rpx;">{{school.introduce}}</view>
			</view>
			<template v-if="tabActive==2" >
				<view class="info-item" v-for="(item,index) in list" :key="item.id">
					<view class="title">专业：{{item.speciality}}</view>
					<view class="title">毕业生人数：{{item.number}}</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		getDetailList,
		getSpecialityList,
		bakGetSchoolByIdApi
	} from '@/api/union_school.js'
	export default {
		data() {
			return {
				imageUrl: '',
				type: null,
				tabActive: 1,
				school: {
					introduce: ''
				},
				list:[],
				page: 1,
				limit: 6,
				// school: 1,
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			bindActive(index) {
				this.tabActive = index
			},
			// 详情
			getSchoolListDetail() {
				bakGetSchoolByIdApi({
					id: this.schoolId
				}).then((res) => {
					this.school = res
					console.log(this.school)

				})
			},
			// 专业
			getSchoolSpecialityList() {
				getSpecialityList({
					page: this.page,
					limit: this.limit,
					schoolId: this.schoolId
				}).then((res) => {
					console.log(res)
					this.list = res.list
					console.log(123456789)
					console.log(this.list)
				})
			},
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.name
			})
			this.type = e.type
			this.schoolId = e.id
			this.getSchoolListDetail()
			this.getSchoolSpecialityList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.menu-item {
			width: 100%;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			//margin-left: 40rpx;

			.tab-item {
				margin-top: 30rpx;
				height: 60rpx;
				font-size: 30rpx;
				margin-left: 40rpx;
			}

			.tab-item.active {
				color: #FE7526;
				font-size: 34rpx;
				font-weight: bold;
				height: 60rpx;
				border-bottom: 6rpx solid #FE7526;
			}
		}

		.info-block {
			padding: 30rpx;
			width: 100%;

			.introduction {
				background: #fff;
				min-height: 60vh;
				border-radius: 20rpx;
			}

			.info-item {
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;
				padding: 30rpx;
				background: #fff;
				box-shadow: 0 0 10px 0 #efefef;
				border-radius: 20rpx;

				.title {
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>